<template>
  <div class="container">
    <div class="top">
      <el-select v-model="from" placeholder="选择语言" size="small" style="width: 100px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-icon><SemiSelect /></el-icon>
      <el-select v-model="to" placeholder="选择语言" size="small" style="width: 100px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" style="margin-left: 10px" size="small" @click="translate"
        >翻译</el-button
      >
      <el-button type="primary" style="margin-left: 10px" size="small" @click="copy"
        >复制结果</el-button
      >
    </div>
    <div class="main">
      <el-input
        v-model="textarea"
        maxlength="999"
        placeholder="请输入翻译内容"
        :autosize="{ minRows: 5, maxRows: 5 }"
        show-word-limit
        type="textarea"
      />
      <el-input
        v-model="translationResult"
        placeholder="翻译结果"
        :autosize="{ minRows: 4, maxRows: 4 }"
        show-word-limit
        type="textarea"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import md5 from 'blueimp-md5'
import { ElMessage } from 'element-plus'
const from = ref('en')
const to = ref('zh')
const options = ref([
  {
    value: 'auto',
    label: '自动检测'
  },
  {
    value: 'zh',
    label: '中文'
  },
  {
    value: 'en',
    label: '英语'
  },
  {
    value: 'yue',
    label: '粤语'
  },
  {
    value: 'wyw',
    label: '文言文'
  },
  {
    value: 'jp',
    label: '日语'
  },
  {
    value: 'kor',
    label: '韩语'
  },
  {
    value: 'fra',
    label: '法语'
  },
  {
    value: 'spa',
    label: '西班牙语'
  },
  {
    value: 'th',
    label: '泰语'
  },
  {
    value: 'ara',
    label: '阿拉伯语'
  },
  {
    value: 'ru',
    label: '俄语'
  },
  {
    value: 'pt',
    label: '葡萄牙语'
  },
  {
    value: 'de',
    label: '德语'
  },
  {
    value: 'it',
    label: '意大利语'
  },
  {
    value: 'el',
    label: '希腊语'
  },
  {
    value: 'nl',
    label: '荷兰语'
  },
  {
    value: 'pl',
    label: '波兰语'
  },
  {
    value: 'bul',
    label: '保加利亚语'
  },
  {
    value: 'est',
    label: '爱沙尼亚语'
  },
  {
    value: 'dan',
    label: '丹麦语'
  },
  {
    value: 'fin',
    label: '芬兰语'
  },
  {
    value: 'cs',
    label: '捷克语'
  },
  {
    value: 'rom',
    label: '罗马尼亚语'
  },
  {
    value: 'slo',
    label: '斯洛文尼亚语'
  },
  {
    value: 'swe',
    label: '瑞典语'
  },
  {
    value: 'hu',
    label: '匈牙利语'
  },
  {
    value: 'cht',
    label: '繁体中文'
  },
  {
    value: 'vie',
    label: '越南语'
  }
])
const textarea = ref('')
const translationResult = ref(null)
const translate = async () => {
  const appid = '20250619002385102'
  const key = 'Y_jRHA8OKKmafVKuLqCR'
  const salt = new Date().getTime()
  const query = textarea.value
  const fromLang = from.value
  const toLang = to.value

  const str1 = appid + query + salt + key
  const sign = md5(str1)

  // 构建查询参数
  const params = new URLSearchParams({
    q: query,
    appid: appid,
    salt: salt.toString(),
    from: fromLang,
    to: toLang,
    sign: sign
  })

  try {
    // 使用 fetch API 发起请求
    const response = await fetch(`http://api.fanyi.baidu.com/api/trans/vip/translate?${params}`)
    const data = await response.json()
    if (data && data.trans_result && data.trans_result.length > 0) {
      translationResult.value = data.trans_result[0].dst
    }
  } catch (error) {
    console.error('翻译请求失败:', error)
    translationResult.value = '翻译请求失败，联系作者！'
  }
}
const copy = () => {
  if (translationResult.value == null) {
    ElMessage({
      message: '请先翻译后再复制！',
      type: 'warning'
    })
  } else {
    navigator.clipboard.writeText(translationResult.value)
    ElMessage({
      message: '复制成功！',
      type: 'success'
    })
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding: 10px;
  color: #333;
//   background-color: #999;
opacity: 0.8;
  -webkit-app-region: no-drag;
  display: flex;
  flex-direction: column;

  .top {
    height: 40px;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // border: 1px solid red;
  }
}
</style>
